<template>
    <div class="root">
        <timers></timers>
        <div class="container">
            <div class="nav">
                <div class="back fa fa-chevron-left fa-lg" @click="back"></div>
                <div class="postserver btn" @click="sendtopost">发表</div>
            </div>
            <div class="area">
                <textarea name="" id="" cols="30" rows="10" v-model="writeMsg.say" placeholder="这一刻的想法..."></textarea>
            </div>
            <div class="photos">
                <div class="myphoto">
                    <img v-for="(item,index) in writeMsg.imgs" :key = index :src="item" alt="" width="105px" height="105px">
                </div>
                <div class="add fa fa-plus fa-3x">
                    <input type="file" name="" @click="addimg" id="">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            writeMsg:{
                user:'',
                userhead:'',
                phone:'',
                say:'',
                imgs:[]
            }
        }
    },
    methods:{
        addimg(e){
            // console.log(e.target.files)
            const promise = new Promise((resolve,reject)=>{
                if(e.target.files.length){
                const files = e.target.files[e.target.files.length-1]
                const reader = new FileReader()  //使用FileReader 将Base64直接存到img的src地址中，就可以直接显示出图片
                reader.onload = (e)=>{
                    resolve(e.target.result)
                }
                    reader.readAsDataURL(files)
                }
            })
            promise.then(res=>{
                this.writeMsg.imgs.push(res)
            })
            
        },
        async sendtopost(){
            const res = await this.$http.post('/api/sendfriendsmoment', this.writeMsg)
            if(res.data.code === 200){
                alert('发布成功~')
                this.$router.push('/friendsmoments')
            }else{
                alert('发布失败~请重试~')
            }
        },
        back(){
            this.$router.push('/friendsmoments')
        }
    },
    created(){
        this.$store.state.userMsg.push(window.sessionStorage.getItem('userMsg'))
        this.writeMsg.user = JSON.parse(this.$store.state.userMsg[0]).userName
        this.writeMsg.phone = JSON.parse(this.$store.state.userMsg[0]).phone
        this.writeMsg.userhead = JSON.parse(this.$store.state.userMsg[0]).header
    }
}
</script>

<style lang="less" scoped>
    .root{
        width: 100vw;
        height: 100vh;
        display: flex;
        // justify-content: center;
        flex-direction: column;
        align-items: center;
        // align-items: center;
    }
    .container{
        width: 95vw;
        height: 100%;
        // border: 1px solid #ccc;
    }
    .nav{
        width: 100%;
        height: 45px;
        // background-color: #2ecc71;
        display: flex;
        align-items: center;
        margin-top: 5px;
        justify-content: space-between;
        div{
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .btn{
            width: 65px;
            height: 100%;
            background-color: rgb(0, 198, 92);
            border-radius: 5px;
            color: rgb(228, 255, 239);
        }
    }
    .area{
        width: 100%;
        height: 130px;
        // background-color: rgb(8, 193, 95);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10px;
        textarea{
            width: 95%;
            height: 100%;
            border: none;
            font-size: 16px;
            outline: none;
        }
        textarea::-webkit-input-placeholder{
            font-size: 16px;
            color: rgb(169, 169, 169);
        }
    }
    .photos{
        width: 100%;
        height: 140px;
        // background-color: red;
        display: flex;
        margin-top: 10px;
        // justify-content: space-around;
        flex-wrap: wrap;
        .add{
            width:105px;
            height: 105px;
            background-color: rgb(245, 245, 245);
            display: flex;
            justify-content: center;
            align-items: center;
            color: rgb(185, 185, 185);
            font-weight: lighter;
            position: relative;
            margin-left: 5px;
            margin-top: 5px;
            input{
                position: absolute;
                width: 100%;
                height: 100%;
                opacity: 0;
            }
        }
        .myphoto{
            // width: 100px;
            // height: 105px;
            // background-color: skyblue;
            // margin: 0 5px;
            display: flex;
            flex-wrap: wrap;
            img{
                margin: 0 5px;
                margin-top: 5px;
            }
        }
    }
</style>
